<template>
    <div class="layout-padding-auto layout-padding-view">
      <el-form :model="state.queryForm" ref="queryRef" :inline="true">
      </el-form>
      <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
        style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
        :header-cell-style="tableStyle.headerCellStyle" ref="tableRef">
        <el-table-column :label="$t('wrapband.barcode')" prop="barcode" width="150px" />
        <el-table-column :label="$t('wrapband.materialCode')" prop="materialCode" width="150px" show-overflow-tooltip />
        <el-table-column :label="$t('wrapband.materialName')" prop="materialName" width="150px" />
        <el-table-column :label="$t('wrapband.materialSpec')" prop="materialSpec" width="300px" />
        <el-table-column :label="$t('wrapband.qty')" prop="qty" width="150px" />
        <el-table-column :label="$t('wrapband.unit')" prop="unit" width="150px" />
        <el-table-column prop="isWrap" :label="$t('wrapband.isWrap')" show-overflow-tooltip width="150px">
          <template #default="scope">
            <!--根据不同的状态选择不同的颜色的tag-->
            <el-tag :type="scope.row.isWrap === 'Y' ? 'success' : 'danger'" :effect="scope.row.isWrap === 'Y' ? 'dark' : 'light'">
              {{ scope.row.isWrap === 'Y' ? 'Y' : 'N' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('wrapband.wrapDate')" width="250">
          <template #default="scope">
            {{ scope.row.wrapDate == null ? '-' : scope.row.wrapDate }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('wrapband.warpTime')" width="250">
          <template #default="scope">
            {{ scope.row.warpTime == null ? '-' : scope.row.warpTime }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('wrapband.warpShiftCode')" width="150px">
          <template #default="scope">
            {{ scope.row.warpShiftCode == null ? '-' : scope.row.warpShiftCode }}
          </template>
        </el-table-column>
        <el-table-column prop="isBand" :label="$t('wrapband.isBand')" show-overflow-tooltip width="150px">
          <template #default="scope">
            <!--根据不同的状态选择不同的颜色的tag-->
            <el-tag :type="scope.row.isBand === 'Y' ? 'success' : 'danger'" :effect="scope.row.isBand === 'Y' ? 'dark' : 'light'">
              {{ scope.row.isBand === 'Y' ? 'Y' : 'N' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('wrapband.bandDate')" width="250">
          <template #default="scope">
            {{ scope.row.bandDate == null ? '-' : scope.row.bandDate }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('wrapband.bandTime')" width="250">
          <template #default="scope">
            {{ scope.row.bandTime == null ? '-' : scope.row.bandTime }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('wrapband.bandShiftCode')" width="150px">
          <template #default="scope">
            {{ scope.row.bandShiftCode == null ? '-' : scope.row.bandShiftCode }}
          </template>
        </el-table-column>
        <el-table-column prop="isCreateJob" :label="$t('wrapband.isCreateJob')" show-overflow-tooltip width="150px">
          <template #default="scope">
            <!--根据不同的状态选择不同的颜色的tag-->
            <el-tag :type="scope.row.isCreateJob === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateJob === 'Y' ? 'dark' : 'light'">
              {{ scope.row.isCreateJob }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('wrapband.reportStatus')" prop="reportStatus" width="100" />
        <el-table-column :label="$t('wrapband.batchNo')" prop="batchNo" width="300" />
        <el-table-column :label="$t('wrapband.productLineCode')" prop="productionLineCode" width="150" />
        <el-table-column :label="$t('wrapband.productLineName')" prop="productionLineName" width="150" />
        <el-table-column :label="$t('wrapband.locationCode')" prop="locationCode" width="150" />
        <el-table-column :label="$t('wrapband.locationName')" prop="locationName" width="200" />
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
  </template>
  <script setup lang="ts">
  import { BasicTableProps, useTable } from "/@/hooks/table";
  import { reactive, ref } from 'vue';
  import { GetWrapbandDetails } from '/@/api/platform/report/wrapband';
  import { ElMessage } from 'element-plus';
  import { useI18n } from 'vue-i18n';
  
  const { t } = useI18n();
  
  const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
      Barcode: ''
    },
    pageList: GetWrapbandDetails
  })
  
  const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    tableStyle
  } = useTable(state)
  const tableRef = ref();
  
  // 搜索变量
  const queryRef = ref()
  
  // 清空搜索条件
  const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    getDataList()
  }
  
  // 通过id进行子表的查询
  const query = (row: Object) => {
    // 赋值查询参数
    state.queryForm.Barcode = row.barcode;
    // 刷新子表数据
    getDataList()
  }
  
  // 暴露变量
  defineExpose({
    resetQuery,
    query
  });
  
  </script>